<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>本地测试</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
    <script type="text/javascript">
        function jsToOC() {
            //js向oc传递参数
            window.webkit.messageHandlers.jsTOoc.postMessage('A32026CB-DD96-45F3-8B09-B09DC859C896');
        }
        function ocTOjs(para) {
            //oc主动调用js
            alert(para);
            $("#token").html(para);
            return 'https://www.baidu.com/s?wd=' + para;
        }
    </script>
    <script type="text/javascript">
        document.onselectionchange = () => {
            var range = window.getSelection().toString();
            console.log(range);
            if (range.length > 0) {
                window.webkit.messageHandlers.cap.postMessage(range);
            }
        };
    </script>
</head>

<body>
    <div class="container">
        <div class="btn-group">
            <button class="btn btn-default" type="button" onclick="jsToOC()">js2OC</button>
        </div>
        </br>
        <span class="label label-info" id="token">_________</span>
        <label>咔咔咔咔咔咔扩扩扩扩扩扩</label>
    </div>
</body>

</html>